<%--
  Created by IntelliJ IDEA.
  User: 13585
  Date: 2020/12/22
  Time: 13:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="top.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>index</title>

  <!-- Bootstrap -->
  <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">


  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <c:if test="${!empty msg1}">
    <div class="alert alert-danger">
      <strong>${msg1}</strong>  <a href="regform.jsp" class="btn alert-link">登记</a>
    </div>
  </c:if>
  <c:if test="${!empty msg2}">
    <div class="msg2 alert alert-danger">
      <strong>${msg2}</strong>
    </div>
    <script>
      setTimeout(function () {
        let msg2 = document.getElementsByClassName("msg2")[0];
        msg2.style.display = "none";
      },5000)
    </script>
  </c:if>
  <div class="row">
    <div class="col-md-4">
      <div class="anim title-box1" onclick="jump(this)">
        <a href="apply.jsp">会议室预约</a>
        <span class="glyphicon glyphicon-pencil icon" aria-hidden="true"></span>
      </div>
      <div class="anim title-box2" onclick="jump(this)">
        <a href="${pageContext.request.contextPath}/meetingList">会议室信息</a>
        <span class="glyphicon glyphicon-search icon" aria-hidden="true"></span>
      </div>
      <div class="anim title-box3" onclick="jump(this)">
        <a href="${pageContext.request.contextPath}/applyList">会议室预约表</a>
        <span class="glyphicon glyphicon-list icon" aria-hidden="true"></span>
      </div>
    </div>
    <div class="col-md-8">
      <div id="noticeBoard" >
        <div class="title">
          <h3>网上会议预约须知</h3>
        </div>
        <div id="announce" class="contain">
          <p>为规范和加强报告厅、会议室使用与管理，提高使用效率，报告厅、会议室实行网上预约管理，特制订本规定如下：</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="foot">

</div>
<script>
  let ajax;
  if(window.XMLHttpRequest){
    ajax = new XMLHttpRequest();
  }else {
    ajax = new ActiveXObject("Microsoft.XMLHttp");
  }
  ajax.onreadystatechange = function () {
    if(ajax.readyState == 4 && ajax.status == 200){
      let json = ajax.responseText;
      let announceList = JSON.parse(json);
      let div = document.getElementById("announce");
      /*console.log(announceList);
      console.log(div);*/
      for(let i = 0;i < announceList.length;i++){
        let p = document.createElement("p");
        let span = document.createElement("span");
        span.innerHTML = i + 1 + ".";
        p.append(span);
        p.innerHTML += announceList[i].content;
        div.append(p);
      }
    }
  }
  ajax.open("get","announceList");
  ajax.send()
</script>
<script>
  function jump(obj) {
    let a = obj.getElementsByTagName("a")[0];
    console.log(a);
    a.click();
  }
</script>



</body>
</html>
